<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
<h1 th:text="'Home Page'"></h1>
<script th:src="@{/static/js/axios.js}"></script>

<button id="testAjaxGet">测试AjaxGet请求</button>
<input type="text" readonly id="axiosGet">
<br>
<button id="testAjaxGetParam">测试AjaxGet请求携带参数</button>
<input type="text" readonly id="ajaxGetParam">
<br>
<button id="testAjaxPostParam">测试AjaxPost请求携带参数</button>
<textarea readonly id="ajaxPostParam"></textarea>
<br>
<button id="testAjaxPutParam">测试PUT请求携带参数</button>
<textarea readonly id="ajaxPutParam"></textarea>
<br>
<button id="testAjaxDeleteParam">测试DELETE请求携带参数</button>
<textarea readonly id="ajaxDeleteParam"></textarea>
<br>
<a th:href="@{/download}">下载</a>
<br>
<span>文件上传</span>
<form th:action="@{/upload}" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile">
    <input type="submit" value="上传">
</form>
<script>
    const baseURL = 'http://localhost:8080/ajax/'

    document.getElementById('testAjaxGet').addEventListener('click', function () {
        axios.get(baseURL + 'axiosGet')
            .then(function (res) {
                document.getElementById('axiosGet').value = res.data
            }).catch(function (error) {
            console.log(error)
        })
    })

    document.getElementById('testAjaxGetParam').addEventListener('click', function () {
        axios.get(baseURL + "axiosGetParam", {
            params: {
                username: '张三',
                password: '123456'
            }
        }).then(function (res) {
            document.getElementById('ajaxGetParam').value = res.data
        })
            .catch(function (error) {
                console.log(error)
            })
    })

    document.getElementById('testAjaxPostParam').addEventListener('click', function () {
        //参数位于请求体中
        axios.post(baseURL + 'axiosPostParam', {
            username: 'lisi',
            password: '321@qew'
        }).then(function (res) {
            document.getElementById('ajaxPostParam').value = res.data
        }).catch(function (error) {
            console.log(error)
        })
    })

    document.getElementById('testAjaxPutParam').addEventListener('click', function () {
        axios({
            method: 'put',
            url: baseURL + 'axiosPutParam',
            // 参数位于请求体
            data: {
                id: 12,
                name: '测试',
                email: '321@erw.com'
            }
        }).then(function (res) {
            document.getElementById('ajaxPutParam').value = res.data
        }).catch(function (error) {
            console.log(error)
        })
    })

    document.getElementById('testAjaxDeleteParam').addEventListener('click', function () {
        axios({
            method: 'delete',
            url: baseURL + 'axiosDeleteParam',
            // 参数位于请求行
            params: {
                id: 1
            }
        }).then(function (res) {
            document.getElementById('ajaxDeleteParam').value = res.data
        }).catch(function (error) {
            console.log(error)
        })
    })
</script>
</body>
</html>